/* Palette */
:root{
  --bg:#0b0d12; --surface:#121212; --raised:#1a1a1a;
  --text:#e7ecf3; --muted:#b7c1d1; --border:#2e2e2e; --accent:#20c997;
  --radius:14px; --r-sm:10px; --gap:28px; --gap-sm:18px;
  --pad:clamp(16px,4vw,48px); --maxw:1600px;
  --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-soft:0 6px 18px rgba(0,0,0,.25);
  --trans:160ms cubic-bezier(.2,.65,.2,1);
}
:root{
  /* keep your existing palette above */
  --bg-archive:
    radial-gradient(1200px 800px at 20% 0, rgba(32,201,151,.08), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(255,215,0,.06), transparent 60%),
    var(--bg);
}

/* Optional: a lighter-tint version for light mode */
body.light,[data-theme="light"]{
  --bg-archive:
    radial-gradient(1200px 800px at 20% 0, rgba(32,201,151,.06), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(255,215,0,.05), transparent 60%),
    var(--bg);
}

body.light,[data-theme="light"]{
  --bg:#fff; --surface:#fff; --raised:#f7f8fc; --text:#0e1220; --muted:#5b6475; --border:#e6e9f2;
}
.blog-archive{
  background: var(--bg-archive);   /* was var(--bg) */
  color: var(--text);
  min-height: 100svh;
}
/* Header */
.blog-hero{border-bottom:1px solid var(--border);background:transparent}
.blog-hero .hero-inner{max-width:var(--maxw);margin:0 auto;padding:calc(var(--pad)*1.0) var(--pad)}
.hero-title {
    font-size: 40px;
    line-height: 1.05;
    margin: 2rem 0 0;
    text-align: center;
    letter-spacing: -.02em;
}
.hero-sub{margin:.6rem auto 0 auto;max-width:900px;text-align:center;font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--muted)}

/* Filters BELOW hero */
.filters-bar{border-bottom:1px solid var(--border);background:transparent}
.filters-form{max-width:var(--maxw);margin:0 auto;padding:calc(var(--pad)*.8) var(--pad)}
.filters-row{
  display:grid;
  grid-template-columns: minmax(240px, 420px) 220px 220px max-content;
  align-items:end; column-gap:var(--gap-sm); row-gap:10px;
  place-content: center;
}
@media (max-width:1000px){ .filters-row{grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .filters-row{grid-template-columns:1fr} }

.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:.9rem;color:var(--muted)}
input[type="search"], select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text)
}
input[type="search"]::placeholder{color:color-mix(in oklab, var(--muted), #000 10%)}
/* Keep action buttons on one row */
.field.field-actions{
  flex-direction: row;      /* override the column on .field */
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;      /* prevents accidental wrapping on wide screens */
  flex-wrap: nowrap;
}

.field.field-actions .btn-apply,
.field.field-actions .btn-reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;            /* match your inputs/selects' visual height */
  min-height: 44px;
  padding: 0 16px;         /* vertical size is driven by fixed height */
  line-height: 1;          /* kill default anchor/button line-height diffs */
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.field.field-actions .btn-apply:hover,
.field.field-actions .btn-reset:hover { background: rgba(255,255,255,.05); }

/* keep buttons on one line, avoid stacking */
.field-actions{
  display:flex; gap:10px; align-self:end; white-space:nowrap; flex-wrap:nowrap;
}
.btn-apply,.btn-reset{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 16px; border-radius:10px; text-decoration:none;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition:background var(--trans),border-color var(--trans)
}
.btn-apply:hover,.btn-reset:hover{background:rgba(255,255,255,.05)}


/* Unified hero slider (two visible) */
.hero-sliders{max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--pad) calc(var(--pad)*.6)}
.hero-slider.unified{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative}
.hero-slider.unified .slides{
  display:grid; grid-auto-flow:column; grid-auto-columns:50%;
  transition:transform .5s ease;
}

/* Full-bleed image + stronger bottom overlay */
.hero-card{
  position:relative; min-height:clamp(340px, 40vw, 480px);
  border-right:1px solid var(--border);
}
.hero-card:last-child{border-right:none}
.hero-media{position:absolute; inset:0; display:block; background:var(--raised)}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block}

.hero-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px clamp(16px,2vw,24px);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,1) 100%);
  backdrop-filter: blur(2px);
  display:flex; flex-direction:column; gap:8px;
}
.hero-meta{font-size:.95rem; color:#f0f3f8; opacity:.95; display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-shadow:0 1px 2px rgba(0,0,0,.55)}
.meta-dot{opacity:.75}
.hero-heading{font-size:clamp(1.15rem,2.2vw,1.55rem); margin:.1rem 0 0; text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hero-heading a{color:#fff; text-decoration:none}
.hero-heading a:hover{text-decoration:underline; text-underline-offset:3px}
.hero-excerpt{color:#e7ecf3; opacity:.9; margin:.2rem 0 .4rem; text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hero-actions{
  margin-top:auto;            /* pushes CTA to the bottom of overlay */
  display:flex;
  justify-content:flex-end;   /* right align */
}

.hero-readmore{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  opacity:.95;
  transition: opacity 160ms ease;
}
.hero-readmore:hover{ opacity:1; }

/* Single control set — transparent buttons (no background) */
.slider-controls{display:flex;justify-content:center;gap:10px;padding:12px;border-top:1px solid var(--border);background:var(--surface)}
.ctrl{
  appearance:none; background:transparent; border:none; color:var(--text);
  padding:6px 10px; cursor:pointer; font-size:1.05rem; line-height:1;
}
.ctrl:hover{opacity:.8}
.ctrl:focus-visible{outline:2px solid color-mix(in oklab, var(--accent), var(--text) 80%); outline-offset:2px}

/* Posts (2 per row, shorter cards, right-aligned CTA) */
.posts-wrap{max-width:var(--maxw);margin:0 auto;padding:calc(var(--pad)*1.1) var(--pad) var(--pad)}
.posts-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.post-card{
  grid-column: span 6;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
}
.post-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
@media (max-width:840px){ .post-card{ grid-column: span 12; } }

/* Much shorter media area */
.card-media{ aspect-ratio: 3 / 1; background: var(--raised); display: block; }
.card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tighter body */
.card-body{ padding: 10px 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.card-meta{ font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-title{ font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.2; margin: 0; }
.card-title a{ color: var(--text); text-decoration: none; }
.card-title a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.card-excerpt{
  color:var(--muted); margin:2px 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* CTA to the right */
.card-actions{ margin-top: auto; text-align: right; }
.btn-read{
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--trans), border-color var(--trans);
}
.btn-read:hover{ background: rgba(255,255,255,.05); }


/* Pagination — simple text links */
.archive-pagination{margin-top:clamp(24px,6vw,48px); display:flex; justify-content:center}
.archive-pagination ul{list-style:none; display:flex; gap:14px; padding:0; margin:0}
.archive-pagination li{display:inline}
.archive-pagination a,.archive-pagination span{font-size:1rem; text-decoration:none; color:#bbbbbb}
.archive-pagination a:hover{text-decoration:underline; text-underline-offset:4px}
.archive-pagination .current{font-weight:600;     text-decoration: underline;
    color: white;}

/* A11y/Motion */
:focus-visible{outline:2px solid color-mix(in oklab, var(--accent), var(--text) 80%); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hero-slider .slides, .post-card{transition:none} }


/* === POSTS GRID: keep 2 per row via your 12-col grid === */
.post-card{
  /* turn each card into a horizontal split */
  display: grid;
  grid-template-columns: minmax(220px, 38%) 1fr; /* media left, content right */
  align-items: stretch;
  height: clamp(180px, 22vw, 250px); /* max ~250px as requested */
}

/* media left: fill height, no fixed aspect-ratio */
.card-media{
  height: 100%;
  aspect-ratio: auto;      /* override 3/1 */
  background: var(--raised);
  display: block;
}
.card-media img{
  width: 100%;
  height: 100%;
  object-fit: fill;       /* fit nicely into the window */
  display: block;
}

/* content right */
.card-body{
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;        /* keep lines tidy within max height */
}

/* trims text to fit the shorter card */
.card-title{ line-height: 1.2; }
.card-excerpt{
  -webkit-line-clamp: 3;   /* a bit more room than before */
}

/* CTA stays aligned to the right */
.card-actions{ margin-top: auto; text-align: right; }

/* Hover effects remain */
.post-card:hover{ transform: translateY(-2px); }

/* === Responsive: stack on small screens (like before) === */
@media (max-width: 840px){
  .post-card{
    grid-template-columns: 1fr;
    height: auto;                /* let it grow when stacked */
  }
  .card-media{
    aspect-ratio: 16/9;          /* a reasonable banner when stacked */
    height: auto;
  }
}