/**
 * Column Page Styles
 * コラム一覧・記事詳細ページのスタイル
 *
 * @package KNOT_For_Dogs
 */

/* ============================================================
   Layout: Column Container (1080px)
   ============================================================ */

.l-container--column {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--sp-sm);
}

/* ============================================================
   Component: Breadcrumb
   ============================================================ */

.c-breadcrumb {
  border-top: 1px solid var(--color-subtle);
  border-bottom: 1px solid var(--color-subtle);
  padding: var(--sp-sm);
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
}

.c-breadcrumb__separator {
  margin: 0 var(--sp-xs);
  color: var(--color-subtle);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
}

.c-breadcrumb__link {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.c-breadcrumb__link:hover {
  text-decoration: underline;
}

.c-breadcrumb__current {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ============================================================
   Component: Filter Chips
   ============================================================ */

.c-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-mute);
  background-color: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.c-chip:hover {
  border-color: var(--color-accent);
}

.c-chip.is-active {
  background-color: var(--color-surface-soft);
  border-color: var(--color-accent);
  color: var(--color-text-muted);
}

/* ============================================================
   Component: Column Card
   ============================================================ */

.c-card-column {
  background: transparent;
}

.c-card-column__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.c-card-column__image {
  overflow: hidden;
  width: 100%;
  background-color: var(--color-surface-soft);
}

.c-card-column__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-card-column__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-surface-soft);
}

.c-card-column__body {
  display: flex;
  flex-direction: column;
}

.c-card-column__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 20px;
}

.c-card-column__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.c-card-column__date {
  font-family: 'Jost', var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-accent);
  white-space: nowrap;
}

.c-card-column__title {
  font-family: var(--font-ja);
  color: var(--color-text-sub);
  margin: 0;
}

/* Small variant */
.c-card-column--small .c-card-column__image {
  height: 140px;
}

.c-card-column--small .c-card-column__body {
  gap: 8px;
  padding-top: 8px;
}

.c-card-column--small .c-card-column__category {
  font-size: 0.625rem;
  padding: 4px 4px;
}

.c-card-column--small .c-card-column__title {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: var(--lh-tight);
}

/* Large variant */
.c-card-column--large .c-card-column__image {
  height: 300px;
}

.c-card-column--large .c-card-column__body {
  gap: 12px;
  padding-top: 12px;
}

.c-card-column--large .c-card-column__category {
  font-size: 0.6875rem;
  padding: 6px 8px;
}

.c-card-column--large .c-card-column__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .c-card-column--large .c-card-column__image {
    height: 400px;
  }
}

/* ============================================================
   Component: Tag Chip
   ============================================================ */

.c-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-mute);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--duration-fast);
}

.c-tag:hover {
  border-color: var(--color-accent);
}

/* ============================================================
   Archive Page: Column List
   ============================================================ */

.p-column-archive__breadcrumb .l-container {
  max-width: 1080px;
  padding-inline: var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-archive__breadcrumb .l-container {
    max-width: var(--content-width);
    padding-inline: 100px;
  }
}

.p-column-archive__header {
  border-top: 1px solid var(--color-subtle);
  padding: var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-archive__header {
    padding: var(--sp-sm) 100px;
  }
}

.p-column-archive__header .c-heading {
  text-align: left;
  font-size: var(--fz-base); /* 16px: Figma caption-en */
  color: var(--color-accent); /* #80746a */
  line-height: 1.4;
}

.p-column-archive__header .c-heading__sub {
  font-size: var(--fz-xl); /* 32px: Figma ja/heading2-ja */
  font-weight: 700;
  color: var(--color-text-sub); /* #4a4844 */
  line-height: 1.4;
}

.p-column-archive__filter {
  border-top: 1px solid var(--color-subtle);
  border-bottom: 1px solid var(--color-subtle);
  padding: var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-archive__filter {
    padding: var(--sp-sm) 100px;
  }
}

.p-column-archive__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 768px) {
  .p-column-archive__chips {
    max-width: 1080px;
  }
}

.p-column-archive__content {
  padding-top: 0;
}

.p-column-archive__featured {
  margin-bottom: var(--sp-lg);
  padding-top: var(--sp-lg);
}

.p-column-archive__grid {
  gap: 24px;
}

/* ============================================================
   Archive: Posts Grid (JS filter layout)
   ============================================================ */

/* 非表示カード */
.c-card-column.is-hidden {
  display: none;
}

/* SP: 1カラム積み重ね */
.p-column-archive__posts {
  padding-top: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* PC: largeカードフルワイド + 残りは3カラム */
@media (min-width: 768px) {
  .p-column-archive__posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* largeバリアント（可視）はフルワイド — JSが動的にクラスを付け替えるため */
  .p-column-archive__posts > .c-card-column--large:not(.is-hidden) {
    grid-column: 1 / -1;
  }
}

/* Pagination */
.p-column-archive__pagination {
  border-top: 1px solid var(--color-subtle);
  padding-top: var(--sp-md);
  margin-top: var(--sp-lg);
  text-align: center;
}

.p-column-archive__pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.p-column-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-mute);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-mute);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.p-column-archive__pagination .page-numbers.current {
  background-color: var(--color-text-main);
  color: var(--color-on-dark);
  border-color: var(--color-text-main);
}

.p-column-archive__pagination .page-numbers:hover:not(.current) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.p-column-archive__pagination .page-numbers.dots {
  border: none;
  width: auto;
}

/* CTA section for archive */
.p-column-archive__cta {
  margin-top: 0;
}

/* ============================================================
   Single Page: Column Article
   ============================================================ */

.p-column-single__breadcrumb .l-container {
  max-width: var(--content-width);
  padding-inline: var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-single__breadcrumb .l-container {
    padding-inline: 100px;
  }
}

.p-column-single {
  padding-bottom: 0;
}

.p-column-single .l-container--narrow {
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-lg);
}

/* Hero Image */
.p-column-single__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--color-subtle);
}

.p-column-single__hero-image {
  width: 100%;
  overflow: hidden;
}

.p-column-single__hero-image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

/* Meta (category + date) */
.p-column-single__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 20px;
}

.p-column-single__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 6px 8px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.p-column-single__date {
  font-family: 'Jost', var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-accent);
}

/* Title */
.p-column-single__title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: var(--lh-tight);
  color: #2C2420;
  margin: 0;
}

@media (min-width: 768px) {
  .p-column-single__title {
    font-size: 2rem;
  }
}

/* Article Body Content */
.p-column-single__content {
  margin-top: var(--sp-lg); /* Figma: gap 32px between ArticleHero and content */
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-main);
}

.p-column-single__content p {
  margin-bottom: 1.6em;
}

.p-column-single__content p:last-child {
  margin-bottom: 0;
}

/* H2 - Left border 5px + bottom border (Figma: H2) */
.p-column-single__content h2 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-sub);
  border-left: 5px solid var(--color-accent);
  padding-left: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-subtle);
  margin: var(--sp-xl) 0 var(--sp-lg);
}

@media (min-width: 768px) {
  .p-column-single__content h2 {
    font-size: 1.5rem; /* 24px */
  }
}

/* H3 - Bottom border only (Figma: H3, #bfb8af) */
.p-column-single__content h3 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-sub);
  border-bottom: 1px solid var(--color-mute);
  padding-bottom: 4px;
  margin: var(--sp-xl) 0 var(--sp-lg);
}

@media (min-width: 768px) {
  .p-column-single__content h3 {
    font-size: 1.25rem; /* 20px */
  }
}

/* H4 - Left border 4px (Figma: H4, #bfb8af, Medium weight) */
.p-column-single__content h4 {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-sub);
  border-left: 4px solid var(--color-mute);
  padding-left: 12px;
  margin: var(--sp-lg) 0 var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-single__content h4 {
    font-size: 1.125rem; /* 18px */
  }
}

/* H5 - No border (Figma: H5, Bold 16px) */
.p-column-single__content h5 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-sub);
  margin: var(--sp-lg) 0 var(--sp-sm);
}

@media (min-width: 768px) {
  .p-column-single__content h5 {
    font-size: 1rem; /* 16px */
  }
}

/* H6 - No border (Figma: H6, Bold 14px) */
.p-column-single__content h6 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
  color: var(--color-text-sub);
  margin: var(--sp-lg) 0 var(--sp-sm);
}

/* Images in content */
.p-column-single__content img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  margin: var(--sp-lg) 0;
}

.p-column-single__content figure {
  margin: var(--sp-lg) 0;
}

.p-column-single__content figure img {
  margin: 0;
}

.p-column-single__content figcaption {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-xs);
}

/* Lists with circle bullet (Figma: 2x2px circle, color/accent #80746A) */
.p-column-single__content ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-column-single__content ul li {
  display: flex;
  align-items: flex-start;
  gap: 0;
  font-family: var(--font-ja);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-main);
}

.p-column-single__content ul li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  min-width: 4px;
  margin-top: calc((1.6em - 4px) / 2); /* テキストの行高に合わせて垂直中央揃え */
  margin-right: 8px;
  background-color: #80746A; /* color/accent from Figma */
  border-radius: 50%; /* Figma: 2x2px circle (VECTOR with ellipse path) */
  flex-shrink: 0;
}

/* Ordered lists */
.p-column-single__content ol {
  padding-left: 1.5em;
  margin: var(--sp-sm) 0;
}

.p-column-single__content ol li {
  margin-bottom: 0.5em;
}

/* Blockquote / Highlight block */
.p-column-single__content blockquote,
.p-column-single__content .wp-block-quote {
  background-color: var(--color-surface-soft);
  border-left: 3px solid var(--color-accent);
  padding: 16px;
  margin: var(--sp-lg) 0;
  font-family: var(--font-ja);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-sub);
}

.p-column-single__content blockquote p,
.p-column-single__content .wp-block-quote p {
  margin-bottom: 0;
}

.p-column-single__content blockquote cite {
  display: block;
  margin-top: var(--sp-xs);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: normal;
}

/* Tags Section */
.p-column-single__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--color-subtle);
  margin-top: var(--sp-xl);
}

.p-column-single__tags-label {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.p-column-single__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* CTA for single */
.p-column-single__cta {
  margin-top: 0;
}

/* Related Articles */
.p-column-single__related {
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-lg);
}

.p-column-single__related-header {
  border-bottom: 1px solid var(--color-subtle);
  padding-bottom: 8px;
  margin-bottom: var(--sp-md);
}

.p-column-single__related-title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.p-column-single__related-grid {
  gap: 16px;
}

/* ============================================================
   CTA Section (duplicate from front-page for column pages)
   ============================================================ */

.p-column-archive__cta,
.p-column-single__cta {
  background-color: var(--color-accent);
}

.p-column-archive__cta .p-contact__inner,
.p-column-single__cta .p-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-2xl);
}

.p-column-archive__cta .p-contact__text,
.p-column-single__cta .p-contact__text {
  text-align: center;
}

.p-column-archive__cta .p-contact__heading,
.p-column-single__cta .p-contact__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-sm);
}

.p-column-archive__cta .p-contact__title-en,
.p-column-single__cta .p-contact__title-en {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-mute);
  line-height: 1.4;
}

.p-column-archive__cta .p-contact__title-ja,
.p-column-single__cta .p-contact__title-ja {
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-dark);
  line-height: 1.6;
}

.p-column-archive__cta .p-contact__lead,
.p-column-single__cta .p-contact__lead {
  font-family: var(--font-ja);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-dark);
  line-height: 1.6;
  text-align: center;
}

.p-column-archive__cta .p-contact__action,
.p-column-single__cta .p-contact__action {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  align-items: center;
}

@media (min-width: 768px) {
  .p-column-archive__cta .p-contact__action,
  .p-column-single__cta .p-contact__action {
    flex-direction: row;
    gap: var(--sp-sm);
  }
}

/* ============================================================
   Responsive: SP -> PC
   ============================================================ */

@media (min-width: 768px) {
  .l-container--column {
    padding-inline: 100px;
  }

  .p-column-archive__featured {
    padding-top: var(--sp-lg);
  }
}