/* ========== Archive (Li Core) ========== */
:root{
  --li-max:1200px;
  --gap:20px;
  --radius:16px;
  --overlay:rgba(0,0,0,.55);
  --text:#0a0a0a;
  --white:#fff;
  --muted:#5b6670;
  --bg:#f6f7f9;
  --card-border:1px solid rgba(0,0,0,.06);
}

/* Utility for accessibility if theme doesn't have it */
.screen-reader-text{
  position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(1px,1px,1px,1px);border:0;
}

/* Container */
.li-container{width:min(var(--li-max),92%);margin-inline:auto}

/* ===== Hero with background + black overlay ===== */
.li-arch-hero{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  color:#fff;
}
.li-arch-hero-bg{
  position:absolute; inset:0;
  background-image: var(--hero); /* set inline from PHP */
  background-size:cover; background-position:center;
}
.li-arch-hero::before{
  content:""; position:absolute; inset:0; background: var(--overlay);
}
.li-arch-hero .li-container{position:relative; z-index:1}
.li-arch-hero-title{
  margin:0 0 6px; font-size:clamp(28px,3.2vw,42px); line-height:1.1; letter-spacing:-.01em
}
.li-arch-hero-sub{
  margin:0; font-size:clamp(14px,1.6vw,18px); opacity:.9
}

/* ===== Filter (Live Search) ===== */
.li-arch-filter{
  background:#fff; /* white background */
  padding:30px 0;
  border-top:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.li-filter-wrap{
  position:relative;
  max-width:600px; /* centered width */
  margin:0 auto;   /* center horizontally */
}
.li-search-input{
  width:100%;
  height:48px;
  border-radius:12px;
  padding:0 14px;
  font-size:16px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  outline:none;
}
.li-search-input:focus{border-color:#111}
.li-live-results{
  position:absolute;
  top:56px;
  left:0; right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  overflow:hidden;
  display:none;
  z-index:10;
}
.li-live-results.active{display:block}
.li-live-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  text-decoration:none;
  color:#111;
}
.li-live-item:hover{background:#f3f5f7}
.li-live-thumb{
  width:56px;
  height:40px;
  border-radius:8px;
  flex:0 0 56px;
  object-fit:cover;
  background:#eee;
}
.li-live-title{
  font-size:14px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Grid ===== */
.li-arch-grid-wrap{padding:28px 0 48px}
.li-arch-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(12, 1fr);
}
@media (max-width:1024px){ .li-arch-grid{grid-template-columns:repeat(8,1fr)} }
@media (max-width:640px){ .li-arch-grid{grid-template-columns:repeat(4,1fr)} }

/* ===== Card (screenshot style) ===== */
.li-arch-card{
  grid-column:span 4; /* 3 across desktop */
  position:relative;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  border:var(--card-border);
  transition:transform .18s ease;
}
@media (max-width:1024px){ .li-arch-card{grid-column:span 4} } /* 2 across tablet */
@media (max-width:640px){ .li-arch-card{grid-column:span 4} }  /* 1 across mobile */
.li-arch-card:hover{ transform: translateY(-2px); }

.li-arch-thumb{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}
.li-arch-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.li-arch-card:hover .li-arch-thumb img{ transform:scale(1.03); }

/* Overlapping white title box */
.li-arch-titlebox{
  position:relative;
  margin:-34px 14px 16px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  padding:18px 16px;
}
.li-arch-card-title{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:#111;
  line-height:1.25;
}
.li-arch-card-title a{
  color:inherit;
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden; /* clamp to 2 lines */
}

/* ===== Pagination (center + arrows) ===== */
.li-arch-pagination{
  margin-top:28px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.li-arch-pagination .page-numbers{
  min-width:40px;
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  text-decoration:none;
  font-size:14px;
}
.li-arch-pagination .page-numbers.current{
  background:#111;
  color:#fff;
  border-color:#111;
}
.li-arch-pagination .page-numbers:hover{ background:#f0f2f4; }

/* ===== Empty ===== */
.li-arch-empty{ text-align:center; padding:60px 0 }