/* ============================================
   s-column-01 — コラム詳細 + コラム新着
   ============================================ */

/* ──────────────────────────────────
   Archive (コラム新着) — 既存
   ────────────────────────────────── */
.s-column-01 {
  container-type: inline-size;
  background: var(--color-bg);
  padding: var(--section-py) var(--container-padding);
}



.s-column-01__inner {
  max-width: var(--width-inner);
  margin: 0 auto;
}

.s-column-01__header {
  text-align: center;
  margin-bottom: var(--section-header-mb);
}

.s-column-01__label {
  font-size: var(--font-size-2-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-primary);
}

.s-column-01__title {
  font-size: var(--font-size-4-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-top: var(--space-xs);
}

.s-column-01__lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--space-sm);
}

.s-column-01__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

/* subgrid: カード内レイアウト揃え */
.s-column-01__grid > .column-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

/* --- Archive Tablet --- */
@container (min-width: 600px) {
  .s-column-01__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .s-column-01__title {
    font-size: var(--font-size-5-xl);
  }
}

/* --- Archive PC --- */
@container (min-width: 800px) {
  .s-column-01__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ──────────────────────────────────
   Single (コラム詳細)
   ────────────────────────────────── */

/* === Breadcrumb === */
.s-column-01__breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.s-column-01__breadcrumb-inner {
  max-width: var(--content-width-xl);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* === Main wrapper === */
.s-column-01__main {
  max-width: var(--content-width-xl);
  margin: 0 auto;
  padding: var(--space-7-xl) var(--container-padding);
}

/* === Article header === */
.s-column-01__article-header {
  margin-bottom: var(--space-7-xl);
}

/* === Meta row (badges + date + read time) === */
.s-column-01__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.s-column-01__category-badge {
  display: inline-block;
  padding: var(--space-3-xs) var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-3-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-column-01__category-badge:hover {
  opacity: 0.7;
}

.s-column-01__meta-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.s-column-01__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-3-xs);
}

.s-column-01__meta-icon {
  font-size: var(--font-size-lg);
}

/* === Article title === */
.s-column-01__article-title {
  font-size: var(--font-size-3-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-5-xl);
}

/* === Thumbnail === */
.s-column-01__thumbnail {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-7-xl);
  aspect-ratio: 16 / 9;
  background: var(--color-bg-sub);
}

.s-column-01__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Supervisor box === */
.s-column-01__supervisor {
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-lg);
}

.s-column-01__supervisor-avatar {
  width: var(--icon-xl);
  height: var(--icon-xl);
  border-radius: var(--radius-pill);
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.s-column-01__supervisor-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-column-01__supervisor-avatar-icon {
  color: var(--color-text-light);
  font-size: var(--font-size-3-xl);
}

.s-column-01__supervisor-body {
  flex: 1;
  min-width: 0;
}

.s-column-01__supervisor-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-3-xs);
}

.s-column-01__supervisor-label {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: var(--space-4-xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-3-xs);
  font-weight: var(--font-weight-medium);
}

.s-column-01__supervisor-name {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.s-column-01__supervisor-role {
  color: var(--color-text-light);
  font-size: var(--font-size-3-xs);
  margin-bottom: var(--space-3-xs);
}

.s-column-01__supervisor-bio {
  color: var(--color-text-light);
  font-size: var(--font-size-3-xs);
  line-height: var(--line-height-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === TOC (目次) === */
.s-column-01__toc {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3-xl);
  margin-bottom: var(--space-7-xl);
}

.s-column-01__toc--hidden {
  display: none;
}

.s-column-01__toc-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.s-column-01__toc-icon {
  color: var(--color-primary);
}

.s-column-01__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  list-style: none;
  padding: 0;
}

.s-column-01__toc-item {
  font-weight: var(--font-weight-medium);
}

.s-column-01__toc-item--sub {
  padding-left: var(--space-xl);
  color: var(--color-text-light);
  font-weight: var(--font-weight-normal);
}

.s-column-01__toc-link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-column-01__toc-link:hover {
  opacity: 0.7;
}

/* === Body (本文コンテンツ) === */
.s-column-01__body {
  margin-bottom: var(--space-7-xl);
}

/* === Updated date === */
.s-column-01__updated {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--space-3-xs);
  margin-bottom: var(--space-5-xl);
}

.s-column-01__updated-icon {
  font-size: var(--font-size-lg);
}

/* === Share buttons === */
.s-column-01__share {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5-xl);
  margin-bottom: var(--space-7-xl);
}

.s-column-01__share-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.s-column-01__share-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

.s-column-01__share-buttons {
  display: flex;
  gap: var(--space-xs);
}

.s-column-01__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  background: var(--color-bg-sub);
  border-radius: var(--radius-pill);
  color: var(--color-text-light);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-column-01__share-btn:hover {
  opacity: 0.7;
}

.s-column-01__share-svg {
  width: var(--space-lg);
  height: var(--space-lg);
}

/* === Prev/Next pager === */
.s-column-01__pager {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-8-xl);
}

.s-column-01__pager-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.s-column-01__pager-link:hover {
  opacity: 0.7;
}

.s-column-01__pager-link--next {
  text-align: right;
}

.s-column-01__pager-arrow {
  color: var(--color-text-light);
  font-size: var(--font-size-2-xl);
  flex-shrink: 0;
}

.s-column-01__pager-text {
  min-width: 0;
  flex: 1;
}

.s-column-01__pager-label {
  display: block;
  font-size: var(--font-size-3-xs);
  color: var(--color-text-light);
  margin-bottom: var(--space-3-xs);
}

.s-column-01__pager-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* === Latest columns section === */
.s-column-01__latest {
  margin-bottom: var(--space-8-xl);
}

.s-column-01__latest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3-xl);
}

.s-column-01__latest-heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.s-column-01__latest-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-column-01__latest-more:hover {
  opacity: 0.7;
}

.s-column-01__latest-more-icon {
  font-size: var(--font-size-sm);
}

.s-column-01__latest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* === Back link === */
.s-column-01__back {
  text-align: center;
}

.s-column-01__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-5-xl);
  background: var(--color-bg-sub);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-column-01__back-link:hover {
  opacity: 0.7;
}

.s-column-01__back-icon {
  font-size: var(--font-size-xl);
}


/* ──────────────────────────────────
   Single — Responsive
   ────────────────────────────────── */

@container (min-width: 600px) {
  .s-column-01__main {
    padding: var(--space-8-xl) var(--container-padding);
  }

  .s-column-01__article-title {
    font-size: var(--font-size-4-xl);
  }

  .s-column-01__supervisor {
    padding: var(--space-3-xl);
  }

  .s-column-01__supervisor-avatar {
    width: var(--thumb-xs);
    height: var(--thumb-xs);
  }

  .s-column-01__supervisor-name {
    font-size: var(--font-size-lg);
  }

  .s-column-01__supervisor-role {
    font-size: var(--font-size-xs);
  }

  .s-column-01__toc {
    padding: var(--space-5-xl);
  }

  .s-column-01__toc-heading {
    font-size: var(--font-size-xl);
  }

  .s-column-01__toc-list {
    font-size: var(--font-size-lg);
  }

  .s-column-01__pager {
    grid-template-columns: repeat(2, 1fr);
  }

  .s-column-01__pager-link {
    padding: var(--space-3-xl);
  }

  .s-column-01__latest-heading {
    font-size: var(--font-size-2-xl);
  }

  .s-column-01__latest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 800px) {
  .s-column-01__article-title {
    font-size: var(--font-size-5-xl);
  }

  .s-column-01__latest-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}