/* ========== Archive (Li Core) – Fully Responsive ========== */
:root{
  --li-max:1400px;
  --gap:20px;
  --overlay:rgba(0,0,0,.55);
  --text:#0a0a0a; --white:#fff; --muted:#5b6670; --bg:#f6f7f9;

  /* Fluid type scale */
  --fs-hero:clamp(28px,3.2vw,42px);
  --fs-hero-sub:clamp(14px,1.6vw,18px);
  --fs-card-title:clamp(18px,1.2vw + .4rem,22px);
  --fs-body:clamp(14px,.9vw + .3rem,16px);
  --fs-small:clamp(12px,.6vw + .25rem,14px);

  --shadow:0 12px 32px rgba(0,0,0,.12);
}

/* A11y */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(1px,1px,1px,1px);border:0;
}

/* Base */
html,body{margin:0;padding:0}
*{box-sizing:border-box}
body{
  color:var(--text);
  background:var(--bg);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

/* ===== Hero ===== */
.li-arch-hero{
  position:relative;min-height:680px;display:flex;align-items:center;color:#fff;
}
.li-arch-hero-bg{position:absolute;inset:0;background-image:var(--hero);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;text-align:center;}
.li-arch-hero-title{margin:0 0 6px;font-size:var(--fs-hero);line-height:1.12;letter-spacing:-.01em}
.li-arch-hero-sub{margin:0;font-size:var(--fs-hero-sub);opacity:.9}

@media (max-width:1024px){ .li-arch-hero{min-height:560px;} }
@media (max-width:768px){  .li-arch-hero{min-height:480px;} }
@media (max-width:480px){  .li-arch-hero{min-height:420px;} }

/* ===== Filter ===== */
.li-arch-filter{
  background:#fff;padding:28px 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:640px;margin:0 auto}
.li-search-input{
  width:100%;height:50px;border-radius:12px;padding:0 14px;font-size:16px;
  border:1px solid rgba(0,0,0,.12);background:#fff;outline:none;transition:border-color .2s ease, box-shadow .2s ease;
}
.li-search-input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08);}

.li-live-results{
  position:absolute;top:58px;left:0;right:0;background:#fff;border:1px solid rgba(0,0,0,.1);
  border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:none;z-index:10;max-height:60vh;overflow-y:auto;
}
.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:var(--fs-small);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

@media (max-width:480px){
  .li-filter-wrap{max-width:100%}
  .li-search-input{height:48px}
  .li-live-results{top:54px}
}

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

/* ===== Card (image top, title below) ===== */
.li-arch-card{
  grid-column:span 4;position:relative;
  /* removed background and radius */
  border:none;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;padding-bottom:14px;
}
.li-arch-card:hover{transform:translateY(-2px)}
@media (hover:hover){.li-arch-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.06);}}

@media (max-width:1200px){ .li-arch-card{grid-column:span 4} }
@media (max-width:1024px){ .li-arch-card{grid-column:span 4} }
@media (max-width:768px){  .li-arch-card{grid-column:span 3} }
@media (max-width:640px){  .li-arch-card{grid-column:span 4} }
@media (max-width:420px){  .li-arch-card{grid-column:span 2} }

.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)}

.li-arch-titlebox{margin:18px 14px 0;background:transparent;border:0;box-shadow:none;padding:0}
.li-arch-card-title{margin:0;font-size:var(--fs-card-title);font-weight:600;color:#000;line-height:1.28;text-align:left}
.li-arch-card-title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Click/focus a11y on card links */
.li-arch-card a:focus-visible{
  outline:3px solid rgba(33,122,79,.35);
  outline-offset:3px;
}

/* Meta / excerpt (optional classes if you add them) */
.li-arch-meta{margin:8px 14px 0;font-size:var(--fs-small);color:var(--muted);}
.li-arch-excerpt{margin:8px 14px 0 14px;color:#222;font-size:var(--fs-body);line-height:1.6;}

/* ===== Pagination ===== */
.li-arch-pagination{margin-top:32px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.li-arch-pagination .page-numbers{
  min-width:42px;height:42px;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:var(--fs-small);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.li-arch-pagination .page-numbers.current{background:#111;color:#fff;border-color:#111}
.li-arch-pagination .page-numbers:hover{background:#f0f2f4}

/* ===== Bottom CTA ===== */
.li-arch-cta{background:#eef2f3;padding:56px 0}
.li-arch-cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:900px){.li-arch-cta-grid{grid-template-columns:1fr}}

.li-arch-cta-title{margin:0 0 14px;font-size:clamp(26px,2.2vw + .6rem,30px);font-weight:700;line-height:1.2;letter-spacing:.02em}
.li-arch-cta-desc{margin:0 0 20px;font-size:clamp(15px,1.1vw + .4rem,18px);line-height:1.7;color:#222;max-width:720px}

/* CTA form */
.li-cta-form,.li-cta-form *{box-sizing:border-box}
.li-cta-form{max-width:620px}
.li-cta-field{margin-bottom:12px}
.li-cta-field input,.li-cta-btn{display:block;width:100%;height:52px;border-radius:8px;font-size:16px}
.li-cta-field input{border:1px solid rgba(0,0,0,.12);padding:0 14px;background:#fff;outline:none}
.li-cta-btn{border:none;font-weight:800;color:#fff;background:#217a4f;cursor:pointer}
.li-cta-btn:hover{filter:brightness(0.95)}

.li-arch-cta-right img{display:block;width:100%;height:auto;object-fit:contain;background:none;box-shadow:none;border-radius:0}

@media (max-width:480px){
  .li-arch-cta-title{font-size:24px}
  .li-arch-cta-desc{font-size:14px}
}

/* ===== Utilities ===== */
a{text-underline-offset:2px}
a:hover{text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}