/* ===============================
   ARCHIVE PAGE (clean rebuild)
   =============================== */

/* ---- HERO (split) ---- */
.archive-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 8px; /* breathing room below header */
}

.archive-hero__media img,
.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

.archive-hero__copy {
  display: flex;
}

/* ---- SEARCH ---- */
.archive-search {
  margin: 16px 0 24px;
}
.archive-search form {
  display: flex;
  gap: 12px;
}
.archive-search input[type="search"] {
  flex: 1 1 auto;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 1rem;
}
.archive-search .btn {
  padding: 10px 18px;
}

/* ---- CATEGORY GRID ---- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 8px 0 28px;
}

.category-list {
  list-style-type: disc;
  margin-left: 1.25rem;
  padding-left: .5rem;
  display: grid;
  gap: 6px;
}

.category-list li a {
  color: #2b4f81;               /* site link blue */
  text-decoration: none;
  transition: color .2s ease, text-decoration .2s ease;
}
.category-list li a:hover {
  color: #1f3c63;
  text-decoration: underline;
}

/* Preview mode: show 1–5 by default */
.category[data-mode="preview"] .category-list li:nth-child(n+6) {
  display: none;
}
/* Expanded state (JS toggles .category--expanded) */
.category.category--expanded .category-list li {
  display: list-item !important;
}

/* ---- LOWER LAYOUT (Newsletter/Donate + Calculator/Tips) ---- */
/* Clean two-column grid; both columns share identical rhythm */
.archive-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 24px 0 48px;
}

/* Each column is a vertical stack with uniform gaps */
.archive-left,
.archive-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Make cards fill their row height and keep content tight */
.archive-bottom .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0; /* kill stray margins that misalign rows */
}

.archive-bottom .card .pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;        /* reduce dead space inside cards */
  padding: 20px;    /* consistent internal padding */
}

/* Headings inside these four cards – match category size */
.archive-bottom .card h3,
.archive-bottom .card .h5 {
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0 0 4px;
}

/* Paragraph spacing tightened to avoid empty feel */
.archive-bottom .card p {
  margin: 0;
}

/* Center calculators/CTAs at the bottom of each card */
.archive-bottom .calc-embed,
.archive-bottom form {
  margin-top: auto;            /* pins CTA area to the bottom */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Newsletter input: centered and not too wide */
.archive-bottom input[type="email"] {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
}

/* ---- CTA BUTTONS (unified) ----
   All four CTAs identical color, width and centering */
.archive-bottom .btn,
.archive-bottom .btn-primary {
  background-color: #2b4c67;   /* site CTA blue */
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;                /* uniform width for all four */
  align-self: center;          /* keeps center alignment */
  transition: background-color .25s ease, transform .05s ease;
}
.archive-bottom .btn:hover,
.archive-bottom .btn-primary:hover {
  background-color: #1e364b;
  color: #fff !important;
}
.archive-bottom .btn:active,
.archive-bottom .btn-primary:active {
  transform: translateY(1px);
}

/* Ensure form submit adopts same CTA look */
.archive-bottom form .btn,
.archive-bottom form .btn-primary {
  width: 200px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .archive-hero { grid-template-columns: 1fr; }
  .archive-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .archive-grid { grid-template-columns: 1fr; }
}