/* ============================================================
   CATEGORY ARTICLE PAGE — page-specific styles
   Layout: breadcrumb + sidebar (categories/tags) + article list
   Shared by all 4 resource categories (Ikigai, Breaking Limiting
   Beliefs, Things Written by Others, Etc). Kept separate from
   styles.css to avoid conflicts with parallel page conversions.
   ============================================================ */

/* ---------- BREADCRUMB ---------- */
.sec-cat-breadcrumb{
  padding: 24px var(--pad-desktop) 0;
}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
}
.breadcrumb a{ color: var(--secondary); }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ font-weight:600; }

/* ---------- CATEGORY HERO ---------- */
.sec-cat-hero{
  padding: 20px var(--pad-desktop) 40px;
}
.cat-hero-title{ margin-bottom:12px; }
.cat-hero-desc{ max-width:720px; margin-bottom:12px; }
.cat-hero-count{
  display:inline-block; margin:0; padding:4px 14px; border-radius:999px;
  background:#F1EEE6; font-family: var(--font-body); font-size:13px; color: var(--text);
}

/* ---------- BODY LAYOUT: sidebar + list ---------- */
.sec-cat-body{
  padding: 0 var(--pad-desktop) var(--space-section);
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items:start;
}

/* -------- sidebar -------- */
.cat-sidebar{
  background: var(--white);
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 28px 20px;
  box-shadow: 0 1px 2px rgba(43,43,46,.04);
  position: sticky;
  top: var(--sticky-top);
}
.cat-sidebar-title{
  font-family: var(--font-display); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color: var(--text);
  margin: 0 0 14px; padding:0 12px;
}
.cat-nav{ display:flex; flex-direction:column; gap:2px; }
.cat-nav-link{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  font-family: var(--font-body); font-size:15px; line-height:1.3; color: var(--text);
  transition: background .2s, color .2s;
}
.cat-nav-link:hover{ background: #F6F3EC; color: var(--secondary); }
.cat-nav-link.is-current{
  background: #EAF0F8; color: var(--secondary); font-weight:600;
  box-shadow: inset 3px 0 0 var(--secondary);
}
.cat-nav-count{
  flex-shrink:0; min-width:24px; padding:2px 8px; border-radius:999px; text-align:center;
  background:#F1EEE6; font-size:12px; font-weight:600; color: var(--text);
}
.cat-nav-link.is-current .cat-nav-count{ background: var(--secondary); color: var(--white); }
.cat-sidebar-divider{ border:none; border-top:1px solid #EDEAE2; margin: 22px 12px; }
.cat-types{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cat-type{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:9px 12px; border:none; border-radius:12px; background:none; cursor:pointer; text-align:left;
  font-family: var(--font-body); font-size:14px; line-height:1.3; color: var(--text);
  transition: background .2s, color .2s;
}
.cat-type:hover{ background:#F6F3EC; color: var(--secondary); }
.cat-type:focus-visible{ outline:2px solid var(--secondary); outline-offset:1px; }
.cat-type.is-active{ background:#EAF0F8; color: var(--secondary); font-weight:600; }
.cat-type-count{
  flex-shrink:0; min-width:24px; padding:2px 8px; border-radius:999px; text-align:center;
  background:#F1EEE6; font-size:12px; font-weight:600; color: var(--text);
}
.cat-type.is-active .cat-type-count{ background: var(--secondary); color: var(--white); }
.article-row[hidden]{ display:none; }

/* -------- article list -------- */
.cat-list-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 24px; padding-bottom:16px; border-bottom:1px solid #E4E4E4;
  gap:16px; flex-wrap:wrap;
}
.cat-list-head-title{
  font-family: var(--font-display); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color: var(--text); margin:0;
}
.cat-sort{
  font-family: var(--font-body); font-size:14px; color: var(--text);
  appearance:none; -webkit-appearance:none;
  border:1px solid #DDD8CC; border-radius:12px; padding:9px 40px 9px 16px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  cursor:pointer; transition: border-color .2s, box-shadow .2s;
}
.cat-sort:hover{ border-color: var(--primary); }
.cat-sort:focus-visible{ outline:none; border-color: var(--secondary); box-shadow:0 0 0 3px rgba(93,137,182,.2); }

.article-list{ display:flex; flex-direction:column; gap:0; }
.article-row{
  display:flex; gap:28px; padding:28px 0;
  border-bottom:1px solid #EDEAE2;
}
.article-row:first-child, .article-row.is-first-visible{ padding-top:0; }
.article-row:last-child{ border-bottom:none; }
.article-row-thumb{
  flex-shrink:0; width:240px; aspect-ratio:4/3; align-self:flex-start; border-radius:16px;
  background-size:cover; background-position:center;
}
.article-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.article-row-eyebrow{
  font-family: var(--font-body); font-size:13px; color: var(--secondary);
  font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.article-row-title{
  font-family: var(--font-display); font-size: clamp(20px,1.8vw,26px);
  font-weight:600; color: var(--text); margin:0 0 8px; line-height:1.25;
}
.article-row-title a{ color: inherit; }
.article-row-title a:hover{ color: var(--secondary); }
.article-row-excerpt{
  margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.article-row-meta{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-body); font-size:13px; color: var(--text); opacity:.7;
}
.article-row-meta .sep{ opacity:.5; }

/* -------- pagination -------- */
.cat-pagination{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top: 40px;
}
.cat-page-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-size:14px; color: var(--text);
  border:1px solid #CCCCCC; background: var(--white); cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cat-page-btn:hover{ border-color: var(--secondary); color: var(--secondary); }
.cat-page-btn.is-current{
  background: var(--primary); border-color: var(--primary); color: var(--white);
}
.cat-page-btn.is-arrow{ border-color:transparent; background:transparent; font-size:16px; }
.cat-page-btn:disabled{ opacity:.35; cursor:default; pointer-events:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .sec-cat-body{ grid-template-columns: 1fr; }
  .cat-sidebar{ position:static; }
  .article-row-thumb{ width:180px; }
}

@media (max-width: 720px){
  .sec-cat-breadcrumb{ padding: 20px var(--pad-mobile) 0; }
  .sec-cat-hero{ padding: 16px var(--pad-mobile) 32px; }
  .sec-cat-body{ padding: 0 var(--pad-mobile) 60px; gap:32px; }
  .article-row{ flex-direction:column; gap:16px; }
  .article-row-thumb{ width:100%; aspect-ratio:16/10; align-self:auto; }
}