/* partners.css — safely scoped to the cpartners page
   Depends on global /styles.css
*/

/* Scope EVERYTHING to main.cpartners-page */
/* Add header clearance + keep your inner padding */
.cpartners-page{
  padding-top: calc(var(--header-h) + clamp(1rem, 2vw, 2rem));
  padding-right: clamp(1rem, 2vw, 2rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
  padding-left: clamp(1rem, 2vw, 2rem);
}


/* Background image stays behind content */
.cpartners-page::before {
  content: "";
  position: fixed; /* fixed, so it stays put when scrolling */
  inset: 0;
  background: url("/images/TWHiloSunrise.jpg") no-repeat center center;
  background-size: cover;
  opacity: 0.8;  /* restore to 0.8 */
  z-index: -1;   /* behind content */
}
/* Keep ALL direct children above the bg layer */
.cpartners-page > * {
  position: relative;
  z-index: 1;
}

/* --- Header clearance consistency --- */
/* If the first block is .america250-intro or a .page-header, don’t add extra gap */
.cpartners-page > :first-child {
  margin-top: 0 !important;
}

/* Also make long words always wrap (e.g., “Commemoration”) */
.cpartners-page .america250-intro,
.cpartners-page .america250-intro h1 {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Optional: if this page STILL sits too close to the header,
   uncomment the next three lines to add an explicit top cushion here only.
   (Do NOT use if your global main already adds var(--header-h) padding.)
*/
/*
.cpartners-page {
  padding-top: calc(var(--header-h) + clamp(1rem, 2vw, 2rem));
}
*/

/* --- Page heading --- */
.page-header h1 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

/* --- Criteria box --- */
.criteria {
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  box-sizing: border-box;
}

.criteria h2 {
  max-width: 1275px;
  text-align: center;
  font-family: var(--site-font, inherit);
  font-size: 1.25rem;
  color: #967BB6;
  margin: 0 0 1rem 0;
}

.criteria-list {
  margin: 0.5rem 0 0 1.25rem;
}
.criteria-list li {
  margin: 0.35rem 0;
}

/* --- Partners grid --- */
.cpartners {
  margin-top: 1.5rem;
}

/* Fixed-width cards that don’t stretch */
.cpartners-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 260px));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: start;   /* left-align the grid */
}

/* On very narrow phones, allow wrapping earlier to avoid horizontal scroll */
@media (max-width: 360px) {
  .cpartners-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 220px));
  }
}

.cpartners-list li {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
  text-align: center;
}

.cpartner-name {
  display: block;
  font-weight: 600;
}
.cpartner-meta {
  display: block;
  font-size: 0.925rem;
  opacity: 0.75;
}