/* ==========================================================================
   Gratitude page (page-gratitude.php). Builds on css/looc-ui.css.
   ========================================================================== */

/* ---------- Sponsor logos ----------
   Logos are mostly dark artwork on transparent backgrounds, so they sit on light tiles. */
.looc-gratitude-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.looc-gratitude-logos__item {
  position: relative; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden;
  display: grid; place-items: center; padding: 16px;
  background: var(--looc-cream); border-radius: var(--looc-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* The logo is positioned inside the tile's padding, so its size never changes the tile or the grid. */
.looc-gratitude-logos__img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px) !important; object-fit: contain; }
.looc-gratitude-logos__item--name { font-family: var(--looc-font-display); font-weight: 700; color: var(--looc-navy-700); text-align: center; line-height: 1.25; }
@media (max-width: 600px) {
  .looc-gratitude-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .looc-gratitude-logos__item { padding: 10px; font-size: 14px; }
  .looc-gratitude-logos__img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px) !important; }
}

/* ---------- Page text ---------- */
.looc-gratitude-intro { max-width: 820px; margin: 0 auto; }

/* ---------- Donor levels ---------- */
.looc-gratitude-levels { display: grid; gap: 16px; }
.looc-gratitude-level { border: 1px solid var(--looc-line); border-left: 3px solid var(--looc-gold); border-radius: var(--looc-radius); padding: 22px 26px; background: var(--looc-surface); }
.looc-gratitude-level__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.looc-gratitude-level__name { font-size: 24px !important; }
.looc-gratitude-level__amount { color: var(--looc-gold-soft); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.looc-gratitude-level__names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; color: var(--looc-body); font-size: 16px; }
/* Long lists flow into columns instead of one long row */
.looc-gratitude-level__names--columns { display: block; columns: 4 200px; column-gap: 28px; }
.looc-gratitude-level__names--columns li { break-inside: avoid; padding: 2px 0; }