/* ==========================================================================
   IIPT Credo of the Peaceful Traveler
   Inspired by the Credo poster: sunset light, a traveller, "Peaceful" in script.
   ========================================================================== */

/* Poster: text on a warm sunset wash, photo alongside */
.cr-poster {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 640px;
  background: linear-gradient(180deg, #eef4fb 0%, #fbe3d1 55%, #f6c3a0 100%);
}
.cr-poster-text { padding: 72px 64px 72px max(24px, calc((100vw - 1290px) / 2 + 12px)); align-self: center; }
.cr-title {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 700;
  color: #1f2a44;
  margin: 0 0 22px;
}
.cr-script {
  font-family: "Great Vibes", "Brush Script MT", cursive;
  font-weight: 400;
  font-size: 1.9em;
  line-height: .8;
  color: var(--ip-navy);
  padding: 0 4px;
  vertical-align: -6px;
}
.cr-title sup { font-size: .45em; top: -1.2em; }
.cr-preamble { font-size: 18px; line-height: 1.75; color: #33364a; max-width: 640px; margin-bottom: 18px; }
.cr-lines { list-style: none; margin: 0 0 30px; padding: 0; max-width: 640px; }
.cr-lines li { position: relative; padding: 7px 0 7px 26px; font-size: 17px; line-height: 1.55; color: #3b2a22; border-bottom: 1px dashed rgba(122, 64, 30, .18); }
.cr-lines li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--ip-coral); }
.cr-poster-img { position: relative; overflow: hidden; }
.cr-poster-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* Eight commitments */
.cr-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cr-card {
  position: relative;
  background: #fff;
  border-radius: var(--ip-radius);
  padding: 26px 24px 24px;
  box-shadow: var(--ip-shadow);
  border-top: 4px solid var(--ip-sky);
  transition: transform .2s, box-shadow .2s;
}
.cr-card:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow-lg); }
.cr-card:nth-child(4n+2) { border-top-color: var(--ip-amber); }
.cr-card:nth-child(4n+3) { border-top-color: var(--ip-deep); }
.cr-card:nth-child(4n+4) { border-top-color: var(--ip-coral); }
.cr-num { display: block; font-size: 36px; font-weight: 800; line-height: 1; color: var(--ip-sky); margin-bottom: 14px; }
.cr-card:nth-child(4n+2) .cr-num { color: #e39818; }
.cr-card:nth-child(4n+3) .cr-num { color: var(--ip-deep); }
.cr-card:nth-child(4n+4) .cr-num { color: var(--ip-coral); }
.cr-ico { position: absolute; top: 26px; right: 24px; font-size: 22px; color: #c9d6e8; }
.cr-card p { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--ip-navy); }

/* Pledge band over the sunset photo */
.cr-band {
  position: relative;
  padding: 96px 0;
  background: url("../images/credo/credo-hero.jpg") center 70% / cover no-repeat;
  color: #fff;
}
.cr-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 28, 71, .88) 0%, rgba(13, 45, 110, .7) 50%, rgba(13, 45, 110, .25) 100%); }
.cr-band .container { position: relative; }
.cr-band-inner { max-width: 640px; }
.cr-band-quote { font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 54px; line-height: 1.15; color: #fff; margin-bottom: 18px; }
.cr-band p { color: rgba(255, 255, 255, .9); line-height: 1.75; margin-bottom: 26px; }

@media (max-width: 1199px) {
  .cr-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-poster-text { padding: 56px 40px 56px 24px; }
}
@media (max-width: 991px) {
  .cr-poster { grid-template-columns: 1fr; }
  .cr-poster-img { height: 380px; order: -1; }
  .cr-poster-img img { object-position: 50% 75%; }
  .cr-poster-text { padding: 44px 24px; }
}
@media (max-width: 767px) {
  .cr-title { font-size: 28px; }
  .cr-preamble { font-size: 17px; }
  .cr-lines li { font-size: 16px; }
  .cr-grid { grid-template-columns: 1fr; }
  .cr-band { padding: 64px 0; }
  .cr-band-quote { font-size: 40px; }
}