/* =========================================
   HISTORY THREADS
========================================= */

.threads-page{
max-width:1400px;
margin:0 auto;
padding:120px 28px 80px;
}


/* =========================================
   HERO
========================================= */

.threads-hero{
max-width:900px;
margin:0 auto 70px;
text-align:center;
}

.threads-kicker{
font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:#c89b48;
margin-bottom:14px;
}

.threads-hero h1,
.threads-header h1{
margin:0;
font-size:clamp(38px,5vw,68px);
line-height:1.05;
letter-spacing:-1.5px;
color:#111827;
}

.threads-hero p{
max-width:720px;
margin:22px auto 0;
font-size:18px;
line-height:1.7;
color:#64748b;
}


/* =========================================
   SEARCH
========================================= */

.threads-search{
display:flex;
gap:10px;
max-width:720px;
margin:34px auto 0;
}

.threads-search input{
flex:1;
min-width:0;
height:54px;
padding:0 18px;
font-size:16px;
color:#111827;
background:#fff;
border:1px solid #d8dee8;
border-radius:10px;
outline:none;
transition:
border-color .2s ease,
box-shadow .2s ease;
}

.threads-search input:focus{
border-color:#b88a3b;
box-shadow:0 0 0 3px rgba(184,138,59,.12);
}

.threads-search button{
height:54px;
padding:0 24px;
border:0;
border-radius:10px;
background:#172033;
color:#fff;
font-weight:700;
cursor:pointer;
transition:
transform .18s ease,
background .18s ease;
}

.threads-search button:hover{
background:#263249;
transform:translateY(-1px);
}


/* =========================================
   DISCOVERY
========================================= */

.threads-discover{
max-width:1100px;
margin:0 auto;
}

.threads-section-head{
display:flex;
align-items:end;
justify-content:space-between;
margin-bottom:24px;
}

.threads-section-head h2{
margin:0;
font-size:28px;
color:#111827;
}

.threads-tag-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
}

.threads-tag-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 20px;
background:#fff;
border:1px solid #e2e8f0;
border-radius:12px;
text-decoration:none;
box-shadow:0 6px 20px rgba(15,23,42,.04);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}

.threads-tag-card:hover{
transform:translateY(-3px);
border-color:#d0a556;
box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.threads-tag-card strong{
color:#1e293b;
font-size:15px;
}

.threads-tag-card span{
font-size:12px;
color:#94a3b8;
white-space:nowrap;
}


/* =========================================
   THREAD HEADER
========================================= */

.threads-header{
max-width:1180px;
margin:0 auto 34px;
padding-bottom:28px;
border-bottom:1px solid #e2e8f0;
}

.threads-summary{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin-top:18px;
font-size:14px;
color:#64748b;
}

.threads-summary strong{
font-size:18px;
color:#111827;
}

.threads-summary-divider{
color:#cbd5e1;
}

.threads-header-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:22px;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.threads-layout{
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:48px;
align-items:start;
}


/* =========================================
   SIDEBAR
========================================= */

.threads-sidebar{
position:sticky;
top:90px;
}

.threads-search-small{
display:block;
margin:0;
}

.threads-search-small label{
display:block;
margin-bottom:8px;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:#64748b;
}

.threads-search-small input{
width:100%;
height:44px;
}

.threads-search-small button{
width:100%;
height:42px;
margin-top:8px;
}

.threads-related{
margin-top:28px;
padding-top:24px;
border-top:1px solid #e2e8f0;
}

.threads-sidebar-title{
margin-bottom:12px;
font-size:11px;
font-weight:700;
letter-spacing:1.3px;
text-transform:uppercase;
color:#64748b;
}

.threads-related-list{
display:flex;
flex-direction:column;
gap:6px;
}

.threads-related-tag{
display:flex;
justify-content:space-between;
gap:14px;
padding:9px 11px;
border-radius:7px;
text-decoration:none;
color:#334155;
font-size:13px;
transition:
background .15s ease,
color .15s ease;
}

.threads-related-tag:hover{
background:#f1f5f9;
color:#111827;
}

.threads-related-tag strong{
color:#b18437;
font-size:12px;
}

.threads-sidebar-note{
margin-top:26px;
padding:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:10px;
font-size:12px;
line-height:1.6;
color:#64748b;
}

.threads-sidebar-note strong{
display:block;
margin-bottom:6px;
color:#334155;
}

.threads-sidebar-note p{
margin:6px 0 0;
}


/* =========================================
   THREAD
========================================= */

.history-thread{
position:relative;
min-width:0;
}

.history-thread-line{
position:absolute;
top:28px;
bottom:70px;
left:28px;
width:2px;
background:linear-gradient(
180deg,
#c89b48 0%,
#cbd5e1 80%,
transparent 100%
);
}

.history-thread-event{
position:relative;
display:grid;
grid-template-columns:58px minmax(0,1fr);
gap:22px;
margin-bottom:28px;
}

.history-thread-node{
position:relative;
z-index:2;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#172033;
border:4px solid #fff;
box-shadow:
0 0 0 1px #d7b875,
0 5px 14px rgba(15,23,42,.14);
}

.history-thread-node span{
font-size:11px;
font-weight:700;
letter-spacing:.7px;
color:#f4cf81;
}


/* =========================================
   EVENT CARD
========================================= */

.history-thread-card{
min-width:0;
display:grid;
grid-template-columns:190px minmax(0,1fr);
overflow:hidden;
background:#fff;
border:1px solid #e2e8f0;
border-radius:14px;
text-decoration:none;
box-shadow:
0 8px 28px rgba(15,23,42,.055);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}

.history-thread-card:hover{
transform:translateY(-3px);
border-color:#d0a556;
box-shadow:
0 16px 36px rgba(15,23,42,.1);
}

.history-thread-media{
min-height:220px;
background:#e2e8f0;
}

.history-thread-media img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.history-thread-content{
min-width:0;
padding:22px 24px;
}

.history-thread-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:9px;
margin-bottom:10px;
}

.history-thread-date{
font-size:12px;
font-weight:700;
color:#b18437;
}

.history-thread-category{
padding:4px 8px;
border-radius:999px;
background:#f1f5f9;
font-size:10px;
font-weight:700;
letter-spacing:.6px;
text-transform:uppercase;
color:#64748b;
}

.history-thread-content h2{
margin:0;
font-size:24px;
line-height:1.25;
color:#172033;
}

.history-thread-location{
margin-top:9px;
font-size:12px;
color:#64748b;
}

.history-thread-content p{
margin:14px 0 0;
font-size:14px;
line-height:1.7;
color:#64748b;
}

.history-thread-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:16px;
}

.history-thread-tags span{
padding:5px 8px;
border:1px solid #e2e8f0;
border-radius:6px;
background:#f8fafc;
font-size:10px;
color:#64748b;
}

.history-thread-open{
margin-top:18px;
font-size:12px;
font-weight:700;
color:#a97827;
}


/* =========================================
   THREAD END
========================================= */

.history-thread-end{
position:relative;
display:grid;
grid-template-columns:58px minmax(0,1fr);
gap:22px;
align-items:center;
margin-top:8px;
}

.history-thread-end-node{
position:relative;
z-index:2;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff;
border:2px solid #c89b48;
font-weight:700;
color:#a97827;
}

.history-thread-end small{
display:block;
font-size:10px;
font-weight:700;
letter-spacing:1.3px;
text-transform:uppercase;
color:#b18437;
}

.history-thread-end strong{
display:block;
margin-top:3px;
font-size:16px;
color:#172033;
}

.history-thread-end span{
display:block;
margin-top:4px;
font-size:12px;
color:#64748b;
}


/* =========================================
   EMPTY
========================================= */

.threads-empty{
max-width:700px;
margin:70px auto;
padding:40px;
text-align:center;
background:#fff;
border:1px solid #e2e8f0;
border-radius:14px;
}

.threads-empty h2{
margin:0;
color:#172033;
}

.threads-empty p{
color:#64748b;
}

.threads-empty a{
font-weight:700;
color:#a97827;
text-decoration:none;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:900px){

.threads-layout{
grid-template-columns:1fr;
gap:28px;
}

.threads-sidebar{
position:relative;
top:auto;
}

.threads-tag-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}

}


@media(max-width:680px){

.threads-page{
padding:
90px 16px
60px;
}

.threads-search{
flex-direction:column;
}

.threads-search button{
width:100%;
}

.threads-tag-grid{
grid-template-columns:1fr;
}

.history-thread-event{
grid-template-columns:40px minmax(0,1fr);
gap:12px;
}

.history-thread-line{
left:19px;
}

.history-thread-node,
.history-thread-end-node{
width:40px;
height:40px;
}

.history-thread-card{
grid-template-columns:1fr;
}

.history-thread-media{
height:190px;
min-height:0;
}

.history-thread-content{
padding:18px;
}

.history-thread-content h2{
font-size:21px;
}

.history-thread-end{
grid-template-columns:40px minmax(0,1fr);
gap:12px;
}

}