/* Topic page styles extracted from topic.html */

/* Topic two-column layout - archive (left) + list (right) */
.topics-container{
    display:grid;
    grid-template-columns:28% 1fr;
    gap:32px;
    align-items:start;
    padding:48px 24px;
    max-width:1200px;
    margin:0 auto;
    box-sizing:border-box;
}
.topics-sidebar{
    background:var(--bg-surface,#0b0b0d);
    padding:20px;
    border-radius:8px;
    box-shadow:var(--card-shadow, 0 6px 18px rgba(13,12,20,0.6));
    color:var(--text-muted,#bfc3cd);
    min-height:200px;
}
.topics-sidebar .side-title{font-size:14px;margin:0 0 8px;color:var(--accent-blue,#8b5cf6);}
.topic-categories{list-style:none;padding:0;margin:0 0 12px;}
.topic-categories li{margin:6px 0;}
.topic-categories button{all:unset;cursor:pointer;color:inherit;padding:6px 8px;border-radius:6px;display:block;width:100%;}
.topic-categories button:hover,.topic-categories button.active{background:rgba(139,92,246,0.08);color:var(--accent-blue,#8b5cf6);}
.topics-main{min-height:360px}
.topics-list{display:grid;grid-template-columns:1fr;gap:20px}

/* Card: shadow + overflow hidden parent with d-flex child */
.topic-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.02);
    /* Brighter white halo for dark base (visible glow) + soft dark grounding shadow */
    box-shadow:
        0 0px 10px rgba(255,255,255,0.10),
        0 0px 2px rgba(255,255,255,0.3);
    overflow:hidden;
    padding:0; /* inner padding moved to .topic-inner */
    position:relative;
    z-index:0;
    transition: transform .18s ease, box-shadow .18s ease, background-color .12s ease;
    will-change: transform, box-shadow;
}
.topic-card:hover,
.topic-card:focus-within{
    transform: translateY(-6px);
    z-index:2;
    /* stronger white glow on hover */
    box-shadow:
        0 0px 12px rgba(255,255,255,0.4),
        0 0px 20px rgba(0,0,0,0.5);
}
.topic-card .topic-inner{
    background-color: #1a1721;
    display:flex;
    gap:12px;
    align-items:center; /* vertical center thumbnail */
    padding:12px;
}
.topic-card .topic-inner.clickable{cursor:pointer}
.topic-card .topic-inner.clickable:focus{outline:2px solid rgba(139,92,246,0.12);outline-offset:4px}
.topic-card .topic-inner.clickable:hover{filter:brightness(1.02);}
/* Thumb wrapper to contain thumb + background */
.topic-card .topic-thumb-wrap{ flex-shrink:0 }

/* Thumb sizing: use CSS variables and aspect-ratio for stable 16:9 rendering */
:root{ --topic-thumb-width: 160px; --topic-thumb-border-radius: 6px }

/* Mobile: reduce thumb width so it doesn't dominate content */
@media (max-width:640px){
  :root{ --topic-thumb-width: 100%; }
  .topic-card .topic-thumb{ width:100%; }
}

.topic-card .topic-thumb{
    position:relative;
    overflow:hidden;
    border-radius:var(--topic-thumb-border-radius);
    width:var(--topic-thumb-width);
    aspect-ratio: 16 / 9;
    flex-shrink:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08));
}
.topic-card .topic-thumb .topic-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter: blur(6px) brightness(0.6);
    transform: scale(1.06);
    z-index:0;
}
.topic-card .topic-thumb img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:var(--topic-thumb-border-radius);
    display:block;
}
.topic-card .topic-content{flex:1}
.topic-card h3{margin:0 0 6px;font-size:16px}
/* Topic title link styling (matches: bold, no-underline, white, hover & focus states) */
.topic-card .topic-link,
.topic-card h3 > a.topic-link{
    display:block;
    font-weight:700;
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
    line-height:1.3;
    margin-bottom:6px;
    transition: color .15s ease, transform .08s ease;
}
.topic-card .topic-link:hover,
.topic-card .topic-link:focus,
.topic-card h3 > a.topic-link:hover,
.topic-card h3 > a.topic-link:focus{
    color:var(--accent-blue,#8b5cf6);
    text-decoration:underline;
    transform: translateY(-1px);
}
.topic-card .topic-link:focus{
    outline:2px solid rgba(139,92,246,0.12);
    outline-offset:4px;
}
/* Optional: limit title to two lines and truncate with ellipsis if needed */
.topic-card .topic-link.clamp{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.topic-card p{margin:0 0 8px;color:var(--text-muted,#bfc3cd);font-size:14px}
.topic-card time{font-size:12px;color:var(--text-muted,#9aa0ad)}

@media (max-width:880px){
    .topic-card .topic-inner{flex-direction:column}
    .topic-card .topic-thumb img{width:100%;height:160px}
    .topic-card .topic-thumb .topic-bg{display:block}
}

.topic-detail{background:var(--bg-surface,#06060a);padding:24px;border-radius:8px;margin-top:20px;border:1px solid rgba(255,255,255,0.02)}
.topic-detail h1{margin-top:0; font-size:1.6rem;}

/* Mobile: single column */
@media (max-width: 880px){
    .topics-container{grid-template-columns:1fr;padding:20px}
    .topics-list{grid-template-columns:1fr}
    .topics-sidebar{order:1;margin-bottom:16px}
    .topics-main{order:2}
}

/* small helpers */
.archive-list{list-style:none;padding:0;margin:0 0 12px;display:block}
.archive-list li{margin:6px 0}
.archive-btn{all:unset;cursor:pointer;padding:6px 8px;border-radius:6px;display:block;width:100%;text-align:left;color:var(--text-muted,#bfc3cd)}
.archive-btn.active,.archive-btn:hover{background:rgba(255,255,255,0.02);color:var(--accent-blue,#8b5cf6)}
.group-year{font-size:16px;margin:14px 0 8px;color:var(--accent-blue,#8b5cf6)}

/* Year / month styled archive (folder-like) */
.archive-year{margin:8px 0 6px}
.archive-year-btn{all:unset;cursor:pointer;display:block;width:100%;text-align:left;padding:6px 8px;border-radius:6px;font-weight:700;color:#ffffff;background:transparent}
.archive-year-btn:hover{background:rgba(255,255,255,0.02)}
.month-list{list-style:none;padding:6px 8px 6px 16px;margin:6px 0;display:none}
.month-list.open{display:block}
.month-list li{margin:4px 0}
.month-btn{all:unset;cursor:pointer;padding:6px 8px;border-radius:6px;display:block;width:100%;text-align:left;color:var(--text-muted,#bfc3cd)}
.month-btn.active,.month-btn:hover{background:rgba(255,255,255,0.02);color:var(--accent-blue,#8b5cf6)}

/* Tags inside cards: show tags inline with time */
.topic-tags{display:inline-flex;flex-wrap:wrap;gap:8px;margin-top:0}
.topic-tag{all:unset;cursor:pointer;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,0.02);color:var(--text-muted,#bfc3cd);font-size:13px}
.topic-tag:hover{background:rgba(255,255,255,0.03);color:var(--accent-blue,#8b5cf6)}
.topic-card time{display:inline-block;vertical-align:middle;margin-right:8px;color:var(--text-muted,#9aa0ad)}

/* ensure parent allows inline alignment; allow wrap on small screens */
.topic-card .topic-content{display:block}
@media (max-width:880px){
    .topic-tags{display:flex;margin-top:8px}
}

/* Pagination: modern, centered, accessible */
.pagination{display:flex;justify-content:center;margin-top:24px}
.pagination-list{list-style:none;padding:0;margin:0;display:flex;gap:10px;align-items:center}
.pagination-list li{display:inline-block}
.pagination-btn{all:unset;cursor:pointer;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--text,#fff);border:1px solid rgba(255,255,255,0.02);box-shadow:0 6px 18px rgba(0,0,0,0.38);min-width:44px;text-align:center;font-weight:600}
.pagination-btn:hover{background:rgba(255,255,255,0.05);transform:translateY(-2px)}
.pagination-btn:focus{outline:3px solid rgba(139,92,246,0.12);outline-offset:4px}
.pagination-btn[disabled]{opacity:0.45;cursor:default;transform:none}
.pagination-btn.active{background:linear-gradient(90deg,var(--accent-blue,#8b5cf6),#613bdb);color:#fff;box-shadow:0 10px 30px rgba(139,92,246,0.14)}

@media (max-width:480px){
  .pagination-btn{padding:6px 8px;min-width:36px;font-size:14px}
  .pagination-list{gap:8px}
}

/* Page-size control */
.page-size{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;margin-bottom:6px;color:var(--text-muted,#bfc3cd)}
.page-size label{font-size:13px;color:var(--text-muted,#bfc3cd);margin-right:6px}
.page-size select{padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text);min-width:84px}
@media (max-width:480px){.page-size{justify-content:center;margin-top:10px}}

/* category list buttons */
.category-btn{background:transparent;border-radius:6px}
.category-btn.active{background:rgba(139,92,246,0.08);color:var(--accent-blue,#8b5cf6)}

/* small tweaks to match site */
.topics-wrapper .sub-title{margin-top:20px}

/* Page section title for topics list */
.topics-title-jp,
.topics-title-en{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    box-sizing:border-box;
    text-align:center; /* 横方向中央揃え */
    scroll-margin-top: calc(var(--header-offset, 80px) + 16px);
}

.topics-title-jp{
    font-size:28px;
    color:#ffffff;
    font-weight:700;
    letter-spacing:-0.02em;
    margin-bottom:6px; /* JP と EN の間の間隔 */
}
.topics-title-en{
    font-size:14px;
    color:var(--accent-blue,#8b5cf6);
    font-weight:500;
    margin-bottom:18px;
    letter-spacing:0.08em;
}

@media (max-width:880px){
    .topics-title-jp{font-size:20px;margin-bottom:6px;padding:0 16px}
    .topics-title-en{font-size:12px;margin-bottom:12px;padding:0 16px}
}