/* ==========================================================================
   Help The Poor Initiative — Reports & documents
   Page-specific only. Tokens, header, footer, page banner, review notice and
   the CTA band all come from css/style.css.

   A document library, not a campaign page: the job is to let somebody find
   one specific file quickly and see what is in it before downloading.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Latest report — the one most people came for
   -------------------------------------------------------------------------- */
.latest { padding: 46px 0 0; }

.latest-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: 36px clamp(24px, 3.6vw, 42px);
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 84%);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .82);
}

.latest-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 78px;
  height: 96px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}

.latest-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-warm);
}

.latest-card h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.16;
  color: #fff;
}

.latest-card p {
  max-width: 56ch;
  margin-top: 10px;
  line-height: 1.74;
}

.latest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}

.latest-meta span { display: inline-flex; align-items: center; gap: 7px; }
.latest-meta svg { flex: none; opacity: .8; }

.latest-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

/* --------------------------------------------------------------------------
   2. Year archive
   -------------------------------------------------------------------------- */
.archive { padding: 76px 0; }

.year-block + .year-block { margin-top: 18px; }

.year-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.year-head h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.year-note {
  font-size: .8125rem;
  color: var(--muted);
}

.year-files {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.file {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.file:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  box-shadow: var(--shadow-md);
}

.file-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--green);
}

.file h4 {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

/* Whole row clickable, without nesting interactive elements */
.file h4 a { color: inherit; }
.file h4 a::after { content: ""; position: absolute; inset: 0; }
.file:hover h4 a { color: var(--green); }

.file p {
  margin-top: 4px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.file-size {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}

.file-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  color: var(--green);
}

.file-dl svg { transition: transform var(--speed) var(--ease); }
.file:hover .file-dl svg { transform: translateY(2px); }

/* --------------------------------------------------------------------------
   3. Policies
   -------------------------------------------------------------------------- */
.policies { padding: 78px 0; background: var(--surface-alt); }

.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.policy {
  position: relative;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--green));
  border-radius: var(--radius);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.policy:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.policy-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent, var(--green)) 12%, #fff);
  color: var(--accent, var(--green));
}

.policy h3 {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink);
}

.policy h3 a { color: inherit; }
.policy h3 a::after { content: ""; position: absolute; inset: 0; }
.policy:hover h3 a { color: var(--accent, var(--green)); }

.policy p {
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--muted);
}

.policy-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent, var(--green));
}

/* --------------------------------------------------------------------------
   4. What is in each
   -------------------------------------------------------------------------- */
.guide { padding: 82px 0; }

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 54px;
  align-items: start;
}

.guide-copy p { margin-top: 15px; line-height: 1.82; }

.guide-list { display: grid; gap: 13px; }

.guide-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guide-item svg { flex: none; margin-top: 2px; color: var(--green); }

.guide-item h3 {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--ink);
}

.guide-item p {
  margin-top: 5px;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .latest-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 24px; }
  .latest-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .guide-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .archive, .policies, .guide { padding: 58px 0; }
  .year-files { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
  .latest-card { grid-template-columns: 1fr; }
  .latest-mark { width: 62px; height: 76px; }
  .latest-actions { grid-auto-flow: row; }
  .latest-actions .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* Size moves under the title rather than squeezing a third column. */
  .file { grid-template-columns: 46px minmax(0, 1fr); }
  .file-size { grid-column: 2; }
}